<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jquery-validation</title>
    <style type="text/css">
      form p {
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <form id="myform" method="post" action="">
      <p>
        <label for="myname">用户名：</label>
        <!-- id和name最好同时写上 -->
        <input id="myname" name="myname" />
      </p>
      <p>
        <label for="email">E-Mail：</label>
        <input id="email" name="email" />
      </p>
      <p>
        <label for="password">登陆密码：</label>
        <input id="password" name="password" type="password" />
      </p>
      <p>
        <label for="confirm_password">确认密码：</label>
        <input id="confirm_password" name="confirm_password" type="password" />
      </p>
      <p>
        <input class="submit" type="submit" value="立即注册" />
      </p>
    </form>

    <!-- https://www.cnblogs.com/linjiqin/p/3431835.html -->
    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="./lib/jquery-validation/dist/localization/messages_zh.js"></script>
    <script type="text/javascript">
      $(function () {
        var validate = $('#myform').validate({
          debug: true, //调试模式取消submit的默认提交功能
          //errorClass: "label.error", //默认为错误的样式类为：error
          focusInvalid: false, //当为false时，验证无效时，没有焦点响应
          onkeyup: false,
          submitHandler: function (form) {
            //表单提交句柄,为一回调函数，带一个参数：form
            alert('提交表单')
            form.submit() //提交表单
          },
          rules: {
            myname: {
              required: true,
            },
            email: {
              required: true,
              email: true,
            },
            password: {
              required: true,
              rangelength: [3, 10],
            },
            confirm_password: {
              equalTo: '#password',
            },
          },
          messages: {
            myname: {
              required: '必填',
            },
            email: {
              required: '必填',
              email: 'E-Mail格式不正确',
            },
            password: {
              required: '不能为空',
              rangelength: '密码最小长度:3, 最大长度:10。',
            },
            confirm_password: {
              equalTo: '两次密码输入不一致',
            },
          },
        })
      })
    </script>
  </body>
</html>
